import React, {useEffect, useState} from 'react';
import {Outlet,Link,useNavigate} from "react-router-dom";
import request from "../request";
import {getMessageList} from "../api/message";
function Message(props) {
    const [messageList,setMessageList] = useState([]);
    const navigate = useNavigate();
    useEffect(()=>{
        (async ()=>{
            const result = await getMessageList();
            setMessageList(result);
        })()
    },[]);
    return (
        <div>
            <ul>
                {
                    messageList.map(item=>(
                        <li key={item.id}>
                            <Link to={item.id}>{item.title}</Link> &nbsp;&nbsp;
                            <button onClick={()=>navigate({pathname:item.id})}>push</button>
                            &nbsp;
                            <button onClick={()=>{
                                navigate({
                                    pathname:item.id
                                },{
                                    replace:true
                                })
                            }}>replace</button>
                        </li>
                    ))
                }

            </ul>
            <button onClick={()=>navigate(1)}>前进</button>
            <button onClick={()=>navigate(-1)}>后退</button>
            <hr/>
            <Outlet/>
        </div>
    );
}

export default Message;